<template>
  <div>
    <NDataTable :columns="columns" :data="tableData" :single-line="false" striped />
    <NSpace justify="end" :size="16">
      <NButton type="primary" @click="handleSubmit">提交</NButton>
    </NSpace>
  </div>
</template>

<script setup lang="tsx">
import { ref,onMounted} from 'vue'
import { NCheckbox } from 'naive-ui';

interface Resources{
  id:number,
  parentId:number;
  parentName:string,
  title:string,
  selected: boolean;
  button:GrantResourceButton[]
}
interface GrantResourceButton{
  id:number;
  title:string;
  selected: boolean;
}
// 表格数据
const tableData = ref([
  {id:1,parentId:99,parentName:"组织成员",title:"组织架构",selected:false,button:[{id:7,title:"新增",selected:false},{id:8,title:"修改",selected:false},{id:9,"title":"删除",selected:false}]},
  {id:2,parentId:99,parentName:"组织成员",title:"成员管理",selected:false,button:[{id:10,title:"新增",selected:false},{id:11,title:"修改",selected:false},{id:12,"title":"删除",selected:false}]},
  {id:3,parentId:99,parentName:"组织成员",title:"职位管理",selected:false,button:[{id:13,title:"新增",selected:false},{id:14,title:"修改",selected:false},{id:15,"title":"删除",selected:false}]},
  {id:4,parentId:98,parentName:"系统管理",title:"角色管理",selected:false,button:[{id:16,title:"新增",selected:false},{id:17,title:"修改",selected:false},{id:18,"title":"删除",selected:false}]},
  {id:5,parentId:98,parentName:"系统管理",title:"资源管理",selected:false,button:[{id:19,title:"新增",selected:false},{id:20,title:"修改",selected:false},{id:21,"title":"删除",selected:false}]},
  {id:6,parentId:98,parentName:"系统管理",title:"用户管理",selected:false,button:[{id:22,title:"新增",selected:false},{id:23,title:"修改",selected:false},{id:24,"title":"删除",selected:false}]}
] as Resources[])

// 初始化加载
onMounted(() => {
})

const columns = [
  {
    key: 'parentName',
    title: '一级目录',
    align: 'center',
    width: 100,
    titleColSpan:1,
    rowSpan: (rowData:Resources, rowIndex:number) => {
      let count = 0;
      for (let i = 0; i < tableData.value.length; i++) {
        if (tableData.value[i].parentId === rowData.parentId) {
          count++;
        }
      }
      return count;

      // return getLastIndex( rowIndex, [rowData.parentId]);
    },
    render: (row:Resources)=> (
      <NCheckbox v-model:checked={row.selected} onUpdate:checked={(checkedValue) => checkedParent(checkedValue,row,'parent') }>
        {row.parentName}
      </NCheckbox>
    )
  },
  {
    key: 'title',
    title: '菜单',
    align: 'center',
    width: 100,
    render: (row:Resources)=> (
      <NCheckbox v-model:checked={row.selected} onUpdate:checked={(key) => checkedSub(key,row) }>
        {row.title}
      </NCheckbox>
    )
  },
  {
    key: 'button',
    title: '按钮',
    align: 'center',
    width: 100,
    render: (row:Resources) => (
      <div>
        {
          row.button !=null ? row.button.length > 0 &&
            row.button.map(item => (
              <NCheckbox v-model:checked={item.selected} onUpdate:checked={(key) => checkedButton(key,item,row,'button') }>
                {item.title}
              </NCheckbox>
            )) : null
        }
      </div>
    ),
  }
]

// 选中一级目录
function checkedParent(checkedValue: boolean,parentRow:Resources,type:string){
  const parentId = parentRow.parentId;
  parentRow.selected = checkedValue;
  tableData.value.forEach(row => {
    if(type === 'parent'){
      if (row.parentId === parentId) {
        row.selected = checkedValue;
        row.button?.forEach(button => {
          checkedButton(checkedValue,button,parentRow,"parent")
        });
      }
    }
  });
}
// 选中菜单
function checkedSub(checkedValue: boolean,row:Resources){
  console.log("checkedSub")
  const parentId = row.parentId;
  row.button?.forEach(button => {
    button.selected = checkedValue;
  });
  tableData.value.forEach(row => {
    if (row.parentId === parentId && row.title!== row.title) {
      row.selected = checkedValue;
    }
  });
}
// 选中按钮
function checkedButton(checkedValue: boolean,buttonRow:GrantResourceButton,row:Resources,type:string){
  buttonRow.selected = checkedValue;
  if(type === 'button' && checkedValue){
    checkedParent(checkedValue,row,type)
  }
}
// 选中的数据集合
function getSelectedIds() {
  const selectedIds: number[] = [];
  tableData.value.forEach(row => {
    if (row.selected) {
      selectedIds.push(row.id);
      row.button?.forEach(button => {
        if (button.selected) {
          selectedIds.push(button.id);
        }
      });
    }
  });
  console.log('选中的数据 ID:', selectedIds);
}
// 提交
async function handleSubmit() {
  getSelectedIds()
  // request
  window.$message?.success('操作成功');
}

</script>

<style scoped>

</style>
